<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app" class="container">
    <i-table :data="userList">

        <template #op="scope">
            <button class="btn btn-success">查看-{{ scope }}</button>
            <button class="btn btn-danger">删除</button>
        </template>

    </i-table>


</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">
    Vue.component('i-table', {


        props: ['data'],

        template: `
            <>
               <table class="table table-bordered table-striped table-hover">
                  <caption>Optional table caption.</caption>
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>用户名</th>
                      <th>年龄</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="ele in data">
                      <th scope="row">{{ele.id}}</th>
                      <td>{{ ele.name }}</td>
                      <td>{{ ele.age }}</td>
                      <td>
                        <slot name="op" :info="ele"></slot>
                      </td>
                    </tr>
                  </tbody>
                </table>
            </>
        `
    });


    new Vue({
        el: '#app',
        data: {
            msg: '插槽',
            userList: [
                {
                    id: 1,
                    name: 'mark',
                    age: 23,
                },
                {
                    id: 2,
                    name: 'lilei',
                    age: 25,
                }
            ]
        }
    })

</script>

</html>
